<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind指令</title>

  <style>

      .active {
          border: 1px solid red;
      }

      .box {
          border: 1px dashed #f0f;
      }

      .textColor {
          color: #f00;
          background-color: #eef;
      }

      .textSize {
          font-size: 30px;
          font-weight: bold;
      }
  </style>
</head>

<body>

  <div id="app">
    <!-- v-bind中支持绑定一个对象, 如果绑定的是一个对象 -->
    <!-- 则键为对应的css类名, 值为对应data中的数据
      注意:
          textColor, textSize 对应的渲染到页面上的CSS类名
          isColor, isSize 对应是vue data中的数据,
          如果为true, 则对应的类名渲染到页面上面

          当isColor和isSize变化时, class列表将相应的更新
          例如, 将isSize改成false, class列表将变成 <ul class="box textColor"></ul>
    -->
    <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
      <li>学习Vue</li>
      <li>学习Node</li>
      <li>学习React</li>
    </ul>
    <div v-bind:style="{color:activeColor,'font-size':activeSize}">对象语法</div>
    <div :class="isColor ? 'textColor':''">三元表达式语法</div>


    <img alt="" v-bind:src="imgSrc">
    <br>
    <!-- 三元表达式的形式   -->
    <img :class="isActive?'active':''" :src="imgSrc" :title="imaTitle+'!!!'" @click="toggleActive" alt="">
    <br>
    <!-- 使用对象的方式  -->
    <img :class="{active:isActive}" :src="imgSrc" :title="imaTitle+'!!!'" @click="toggleActive" alt="">

    <img class="active" src="../img/需求.png">
  </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  /* var app = new Vue({
     el: "#app",
     data: {
       imgSrc: "img/github.png",
       imaTitle: "llhuang10",
       isActive: false
     },
     methods: {
       toggleActive: function () {
         this.isActive = !this.isActive;
       }
     }
   });*/

  var vm = new Vue({
    el: '#app',
    data: {
      isColor: true,
      isSize: true,
      activeColor: "red",
      activeSize: "25px"
    }
  })
</script>
</html>
